<template>
  <div>
    <el-drawer v-model="themeSetting" title="布局设置" size="300px">
      <el-divider class="divider" content-position="center">
        <el-icon><Notification /></el-icon>
        布局切换
      </el-divider>
      <div class="layout-box">
        <el-tooltip placement="top" content="纵向" :show-after="200">
          <div class="layout-item posi " :class="[layout=='vertical'?'isactive':'']" @click="changeLayout('vertical')">
            <div class="layout-dark"></div>
            <div class="layout-container">
              <div class="layout-container-left"></div>
              <div class="layout-container-right"></div>
            </div>
            <el-icon v-if="layout=='vertical'" ><CircleCheckFilled /></el-icon>
          </div>
        </el-tooltip>

        <el-tooltip placement="top" content="分栏" :show-after="200">
          <div class="layout-item-columns posi"  :class="[layout=='columns'?'isactive':'']" @click="changeLayout('columns')">
            <div class="layout-dark-columns"></div>
            <div class="layout-container-left-columns"></div>
            <div class="layout-container-right-columns"></div>
            <el-icon v-if="layout=='columns'"><CircleCheckFilled /></el-icon>
          </div>
          
        </el-tooltip>

       

        

      
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { mainStore } from "@/stores";
import { ref, reactive } from "vue";
import { storeToRefs } from "pinia";

let { layout ,themeSetting} = storeToRefs(mainStore());

let layoutType = ref("vertical")

let changeLayout = (val)=>{
    layoutType.value = val
    layout.value = val
}

// console.log(themeSetting.value,layout.value,"fefes")

</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>